<template>
<div>
  <!-- 新增位置 -->
  <el-row type="flex" class="row-bg" justify="space-between">
    <el-col :span="4"><span style="font-size: 12px; color: pink;">说明：目前支持学科和关键字条件筛选</span></el-col>
    <el-col :span="2">
      <el-button type="success" size='small' @click="$router.push('/questions/new')">
        <i class="el-icon-edit"></i>
        <span>新增试题</span>
      </el-button>
    </el-col>
  </el-row>
  <!-- 搜索位置 -->
  <el-form label-width="80px">

    <el-row type="flex" class="row-bg" justify="space-between" label-position='left'>

      <el-col :span="6">
        <el-form-item label="学科">
          <el-select v-model="form.label" placeholder="请选择" @change="addTwo">
            <el-option  v-for="item in label" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="6">
        <el-form-item label="二级目录">
          <el-select v-model="form.subjectTwo" placeholder="请选择">
            <el-option v-for="item in addsubject" :key="item.id" :label="item.directoryName" :value="item.directoryName"></el-option>
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="6">
        <el-form-item label="标签">
          <el-select placeholder="请选择" v-model="form.addtags">
            <el-option v-for="item in addtags" :key="item.id" :label="item.tagName" :value="item.tagName"></el-option>
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="6">
        <el-form-item label="关键字">
          <el-input v-model="form.keyword" placeholder="根据题干搜索"></el-input>
        </el-form-item>
      </el-col>

    </el-row>

    <el-row type="flex" class="row-bg" justify="space-between" label-position='left'>

      <el-col :span="6">
        <el-form-item label="试题类型">
          <el-select v-model="form.choose" placeholder="请选择">
            <el-option v-for="item in constant.chkType" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="6">
        <el-form-item label="难度">
          <el-select v-model="form.difficulty" placeholder="请选择">
            <el-option v-for="item in constant.difficulty" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="6">
        <el-form-item label="方向">
          <el-select v-model="form.direction" placeholder="请选择">
            <el-option v-for="item in constant.direction" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="6">
        <el-form-item label="录入人" >
          <el-select v-model="form.userList" placeholder="请选择">
        <el-option v-for="item in userList" :key="item.id" :label="item.username" :value="item.username"></el-option>
          </el-select>
        </el-form-item>
      </el-col>

    </el-row>

    <el-row type="flex" class="row-bg" justify="space-between" label-position='left'>

      <el-col :span="6">
        <el-form-item label="题目备注">
          <el-input v-model="form.topic"></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="6">
        <el-form-item label="企业简称">
          <el-input v-model="form.companyProfiles"></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="6">
        <el-form-item label="城市">
          <el-col :span="12">
            <el-select v-model="form.provinces" placeholder="请选择" @change="addcitys">
              <el-option v-for="item in provinces" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-col>
          <el-col :span="12">
            <el-select v-model="form.citys" placeholder="请选择" class="selectleft">
              <el-option v-for="item in citys" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-col>
        </el-form-item>
      </el-col>

      <el-col :span="6">
        <el-row type="flex" class="row-bg" justify="end">
          <el-col :span="8">
            <el-button size='small' @click="clearForm">清除</el-button>
            <el-button type="primary" size='small' @click="addsearch">搜索</el-button>
          </el-col>
        </el-row>

      </el-col>

    </el-row>

  </el-form>

</div>
</template>

<script>
import { simple } from '@/api/hmmm/subjects'
import { list as lists } from '../../api/base/users'
import { list as subject } from '../../api//hmmm/directorys'
import { list as tags } from '../../api//hmmm/tags'
import { difficulty, chkType, direction } from '../../api/hmmm/constants'
import { provinces, citys } from '../../api/hmmm/citys'
export default {
  name: 'SearchChoice',
  data () {
    return {
      constant: {
        difficulty,
        chkType,
        direction
      },

      // 地区
      provinces: provinces(),
      // 城市
      citys: {},

      // 用户列表
      userList: {},
      // 搜索数据
      label: '',
      // 二级搜索
      addsubject: [],
      // 标签搜索
      addtags: [],
      // 绑定数据
      form: {
        label: null,
        subjectTwo: null,
        keyword: null,
        choose: null,
        difficulty: null,
        direction: null,
        userList: null,
        topic: null,
        companyProfiles: null,
        provinces: null,
        citys: null,
        addtags: null
      }
    }
  },
  created () {
    this.list()
    this.lists()
  },
  methods: {
    // 学科列表
    async list () {
      const res = await simple()
      this.label = res.data
      this.$emit('labellist', this.label)
    },

    // 用户列表
    async  lists () {
      const res = await lists()
      this.userList = res.data.list
    },

    // 添加城市
    addcitys () {
      this.form.citys = ''
      this.citys = citys(this.form.provinces)
    },

    // 清除表单
    clearForm () {
      this.form = {
        label: '',
        subjectTwo: '',
        keyword: '',
        choose: '',
        difficulty: '',
        direction: '',
        userList: '',
        topic: '',
        companyProfiles: '',
        provinces: '',
        citys: '',
        addtags: ''
      }
    },

    // 获取二级目录和标签
    async  addTwo () {
      this.form.subjectTwo = ''
      this.form.addtags = ''
      const res = await subject({ subjectID: this.form.label })
      this.addsubject = res.data.items
      const num = await tags({ subjectID: this.form.label })
      this.addtags = num.data.items
    },

    // 搜索功能
    addsearch () {
      this.$emit('addsearch', this.form.label)
    }
  }
}
</script>

<style scoped>
.el-select.el-select--medium {
    width: 100%;
}
.row-bg.el-row.is-justify-space-between.el-row--flex {
    margin-bottom: 15px;
}
.el-input--medium .el-input__inner {
    height: 30px;
}
.el-col.el-col-6 {
    height: 40px;
}
.selectleft{
padding-left: 5px;
}
.el-col.el-col-8 {
    padding-left: 15px;
}
</style>
